<template>
	<cl-page statusBarBackground="#fff" background-color="#fff" :fullscreen="true">
		<cl-topbar
			:border="false"
			background-color="#fff"
			color="#333"
			:title="t('bill.detail.title')"
		/>
		<view class="page-info animate__animated animate__fadeIn">
			<view class="flex flex-center flex-column">
				<view class="t1">{{
					cache.lang == "zh" ? "中国建设银行" : "China Construction Bank"
				}}</view>
				<view class="t2">-5000.00</view>
				<view class="t3">{{ $t("bill.detail.success") }}</view>
			</view>

			<view class="list mt30">
				<view class="flex flex-between align-center li">
					<view class="t4">{{ $t("bill.detail.text") }}</view>
					<view class="t5">{{ $t("bill.detail.fast") }}</view>
				</view>
				<view class="flex flex-between align-top li">
					<view class="t4">{{ $t("bill.detail.plan") }}</view>
					<view class="flex align-center just-end">
						<view class="left flex flex-center flex-column mr20">
							<view class="green"></view>
							<cl-icon
								class="icon"
								size="40rpx"
								color="#0C81F7"
								name="toast-waiting"
							></cl-icon>
							<view class="grey"></view>
							<view class="border1"></view>
							<view class="border2"></view>
						</view>
						<view>
							<view class="gtext">{{ $t("bill.detail.plan1") }}</view>
							<view class="btext">{{ $t("bill.detail.plan2") }}</view>
							<view class="ytext">{{ $t("bill.detail.plan3") }}</view>
						</view>
						<view class="time">
							<view>02-13 17:50</view>
							<view class="mtime">02-13 17:52</view>
							<view>02-13 17:55</view>
						</view>
					</view>
				</view>
				<view class="flex flex-between align-center li">
					<view class="t4">{{ $t("bill.detail.wallect") }}</view>
					<view class="t5">{{
						cache.lang == "zh"
							? "中国建设银行（5969）耿语嫣"
							: "China Construction Bank (5969) Geng Yuyan"
					}}</view>
				</view>
				<view class="flex flex-between align-center li">
					<view class="t4">{{ $t("bill.detail.class") }}</view>
					<view class="t5">{{ cache.lang == "zh" ? "其他" : "Other" }}</view>
				</view>
				<view class="flex flex-between align-center li">
					<view class="t4">{{ $t("bill.detail.createtime") }}</view>
					<view class="t5">2018-02-13 17:55</view>
				</view>
				<view class="flex flex-between align-center li">
					<view class="t4">{{ $t("bill.detail.oid") }}</view>
					<view class="t5">2018021317550058987789456898</view>
				</view>
			</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { onReady } from "@dcloudio/uni-app";
import { useApp, useCool, useStore } from "/@/cool";
import { useUi } from "/$/cool-ui";
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
const { t } = useI18n();
const { router, upload } = useCool();
const { user, cache } = useStore();
const ui = useUi();
const app = useApp();

const more = () => {
	router.push("/pages/user/callingCard/edit");
};
</script>

<style lang="scss" scoped>
.page-info {
	padding-top: 60rpx;
	border-top: 1rpx solid #e5e5e5;

	.t1 {
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
	}

	.t2 {
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 50rpx;
		color: #000000;
		margin-top: 40rpx;
	}

	.t3 {
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		margin-top: 30rpx;
	}

	.list {
		padding: 10rpx 30rpx;

		.li {
			margin-top: 50rpx;
		}

		.t4 {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
		}

		.t5 {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			width: 500rpx;
			text-align: right;
		}

		.green {
			width: 24rpx;
			height: 24rpx;
			background: #55cf35;
			border-radius: 50%;
		}

		.grey {
			width: 24rpx;
			height: 24rpx;
			background: #dddddd;
			border-radius: 50%;
		}

		.gtext {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 28rpx;
			color: #55cf35;
		}

		.btext {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 28rpx;
			color: #0c81f7;
			margin: 40rpx 0;
			margin-right: 60rpx;
		}

		.ytext {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
		}

		.time {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
		}

		.left {
			position: relative;

			.icon {
				margin: 44rpx 0;
				position: relative;
				z-index: 3;
			}
		}

		.mtime {
			margin: 50rpx 0;
		}

		.border1 {
			width: 2rpx;
			height: 54rpx;
			background: #55cf35;
			position: absolute;
			left: 20rpx;
			top: 20rpx;
			z-index: 2;
		}

		.border2 {
			width: 2rpx;
			height: 54rpx;
			background: #dddddd;
			position: absolute;
			left: 20rpx;
			bottom: 20rpx;
			z-index: 2;
		}
	}
}
</style>
